const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { DefinePlugin } = require('webpack');
module.exports = {
  entry: './src',
  output: {
    filename: "js/[name].js",
    path: resolve(__dirname, 'dist'),
    // assetModuleFilename: "img/[name].[hash:6][ext]" //所有通过 资源模块类型引入的都会使用
  },

  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
            'style-loader',
            {
              loader: "css-loader",
              options: {
                importLoaders: 2
              }
            },
            'postcss-loader',
            'less-loader'
        ]
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: "css-loader",
            options: {
              importLoaders: 1, //css文件中如果有@import 语句，importLoaders的作用是决定@import模块在使用css-loader前，要使用几个其它的loaders处理。
            }
          },
          "postcss-loader", // 配置文件移到postcss.config.js
          /*{
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                    // require('autoprefixer'), // 大部分特性已经被postcss-preset-env包含，所以一般不用
                    // require('postcss-preset-env') // === 'postcss-preset-env'
                  'postcss-preset-env'
                ]
              }
            }
          }*/
        ]
      },
      {
        /**
         * 资源模块类型
         * asset/resource 发送一个单独的文件并导出URL。之前通过使用file-loader 实现；
         * asset/inline 导出一个资源的data URI。之前通过使用url-loader 实现；
         * asset/source 导出资源的源代码。之前通过使用raw-loader 实现；
         * asset 在导出一个data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源
         * 体积限制实现；
         */
        test: /\.(png|jpe?g|webp|gif)$/i,
        // type: "asset/resource",
        // type: "asset/inline",
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 1024 * 50
          }
        }
        /*use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024 * 50,
              name: 'img/[name].[hash:6].[ext]'
            }
          }
        ]*/
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  },

  plugins: [
      new CleanWebpackPlugin(),
      new HTMLWebpackPlugin({
        title: "Webpack App",
        info: 'hahahahah_test', // 插入变量，使用<%= htmlWebpackPlugin.options.title %>取值
        template: "./public/index.html",
        filename: "index.html"
      }),
      new DefinePlugin({
        BASE_URL: "'./'"
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'public',
            globOptions: {
              ignore: [
                  '**/index.html',
                  '**/.DS_Store',
                  '**/abc.txt'
              ]
            }
          }
        ]
      })
  ],

  mode: 'development'
}